<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            margin: 30px auto;
        }
        table th,table td{
            width: 100px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
        }
        span:hover{
            cursor: pointer;
        }
        div#pageQuery{
            margin-left: 100px;
            width: 400px;
            height: 100px;
            margin: 0 auto;
        }
        p{
            width: 50px;
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
            text-align: center;
            float: left;
            margin: 10px ;
        }
        #add{
            margin-left: 30px;

        }
        
    </style>
    <script src="./jquery-3.5.0/jquery-3.5.0.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        $(function(){
            // //1.获取用户名和密码
            // //2.发送登录请求，获取token
            var baseUrl='http://182.92.83.218:7788';
            //3.携带token,分页查询用户信息
            var token=localStorage.getItem("token")
            // console.log(token)

            $.ajaxSetup({
                headers:{
                    "Authorization":token
                },

            });
            var currentPage=1;
            var pageSize=10;
            function pageQuery(){
                $.ajax({
                url:baseUrl+'/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,
                type:'GET',
                headers:{
                    "Authorization":token
                },
                success:function(data){
                    console.log(data);
                    var users=data.data.list;
                    users.forEach(function(item,index){
                       var tr=$(`<tr>
                       <td>`+item.id+`</td>
                       <td>`+item.username+`</td>
                       <td>`+item.realname+`</td>
                       <td>`+item.politicsStatus+`</td>
                       <td>`+item.gender+`</td>
                       <td>`+item.status+`</td>
                       <td>`+item.telephone+`</td>
                       <td>
                            <span>删除</span>
                       </td>
                       </tr`);
                       $("tbody").append(tr);
                    });

                }
            })
            }
            pageQuery()
                
            //4.给删除按钮绑定事件(事件代理)
            $('tbody').on('click','span',function(){
                //1.获取id
                var id=$(this).parents('tr').children().eq(0).text();
                console.log(id);
                //2.发送删除请求
                $.ajax({
                    url:baseUrl+'/baseUser/deleteById?id='+id,
                    type:'GET',
                    headers:{
                        "Authorization":token
                    },
                    success:function(data){
                        console.log(data);
                        if(data.status==200){
                            //清空tbody中的tr
                            $('tbody').empty();
                            //3.刷新页面
                            pageQuery()
                        }
                    }
                })
               

            })
             //实现分页效果
             $('p').click(function(){
                $('p').css("background-color","#ccc")
                $(this).css("background-color","pink")
                //先清空
                $('tbody').empty();
                currentPage=$(this).text();
                pageQuery();

            })
            // 新增栏目信息
            $("#save").on("click",function() {
                var username = $("#username").val();
                var realname = $("#realname").val();
                var gender=$('#gender').val();
                var telephone=$('#telephone').val();
                var user={
                    username:username,
                    realname:realname,
                    gender:gender,
                    telephone:telephone
                }
                $.post(baseUrl+"/baseUser/saveOrUpdate",user,function(res) {
                    // console.log(res)
                    // 关闭模态框
                    $("#exampleModal").modal("hide")
                    // 重新查询栏目信息
                    $('tbody').empty();
                    pageQuery()
                })
            })
        })
    </script>
</head>
<body>
    <!-- 增加 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="add">
        增加
    </button>
  
  <!-- 增加模态框 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">新增用户</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="categorAddModal">
            <form>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" aria-describedby="emailHelp" name="username">
                </div>
                <div class="form-group">
                    <label for="realname">姓名</label>
                    <input type="text" class="form-control" id="realname" name="realname">
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <input type="text" class="form-control" id="gender" aria-describedby="emailHelp" name="gender">
                </div>
                <div class="form-group">
                    <label for="telephone">手机号</label>
                    <input type="text" class="form-control" id="telephone" name="telephone">
                </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="save">确认</button>
        </div>
      </div>
    </div>
  </div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>角色</th>
                <th>性别</th>
                <th>状态</th>
                <th>手机号</th>
                <th>操作</th>    
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="pageQuery">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>  
</body>
</html>